<template>
	<div class="mqtt_acl_span">
		<table-span
            :current-page="tabelData.current"
            :page-size="tabelData.size"
            :total="tabelData.total"
            :isShowTool="false"
            :isShowPagePlug="false"
            :size-change="handleSizeChange"
            :current-change="handleCurrentChange">
            <template v-slot:searchItem>
                <div class="search_item_span">
                    <el-select v-model="searchCondition.type" placeholder="请选择类型" size="default" clearable>
                        <el-option v-for="item in aclTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_item_span">
                    <el-select v-model="searchCondition.action" placeholder="请选择操作" size="default" clearable>
                        <el-option v-for="item in actionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_item_span">
                    <el-select v-model="searchCondition.permission" placeholder="请选择权限" size="default" clearable>
                        <el-option v-for="item in permissionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_item_span">
                    <el-select v-model="searchCondition.type" placeholder="请选择类型" size="default" clearable>
                        <el-option v-for="item in aclTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="searchCondition.clientId" placeholder="请输入客户端ID" clearable></el-input>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="searchCondition.username" placeholder="请输入用户名" clearable></el-input>
                </div>
                <div class="search_item_span search_item_fix_width">
                    <el-input size="default" v-model="searchCondition.topic" placeholder="请输入主题" clearable></el-input>
                </div>
            	<div class="search_item_span">
                    <el-button icon="Search" size="default" type="primary" @click="searchData">查询</el-button>
                </div>
                <div class="search_item_span">
                    <el-button icon="Plus" size="default"
                        type="primary" :disabled="!(btOption.btMqttAclSave)"
                        @click="btSaveData">新增数据</el-button>
                </div>
            </template>
            <template v-slot:searchTable>
            	<el-table :data="tabelData.records" size="default" height="100%" style="width: 100%;">
                    <el-table-column align="center" type="index" width="50">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="type"
                        label="类型"
                        width="120">
                        <template #default="scope">
                            <el-text v-if="scope.row.type==1">客户端ID</el-text>
                            <el-text v-if="scope.row.type==2">用户名</el-text>
                            <el-text v-if="scope.row.type==3">所有用户</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="clientId"
                        label="客户端ID"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="username"
                        label="用户名"
                        min-width="120">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="action"
                        label="操作"
                        width="120">
                        <template #default="scope">
                            <el-text v-if="scope.row.action=='publish'">发布时</el-text>
                            <el-text v-if="scope.row.action=='subscribe'">订阅时</el-text>
                            <el-text v-if="scope.row.action=='all'">发布和订阅时</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="permission"
                        label="权限"
                        width="120">
                        <template #default="scope">
                            <el-text v-if="scope.row.permission=='allow'">允许</el-text>
                            <el-text v-if="scope.row.permission=='deny'">拒绝</el-text>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="topic"
                        label="主题"
                        min-width="120">
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="240">
                        <template #default="scope">
                            <el-button size="small" :disabled="!(btOption.btMqttAclUpdate)"
                                @click="btUpdateData(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" :disabled="!(btOption.btMqttAclDelete)"
                                @click="btDeleteData(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </table-span>
        <el-dialog :title="dataDialogOption.title" v-model="dataDialogOption.isShow" @close="dataDialogClose"
            :before-close="dataDialogBeforeClose" :close-on-click-modal="false"
            :close-on-press-escape="false" width="420px">
            <el-form ref="dataFormRef" :model="dataForm" :rules="dataFormRules" label-width="80px" size="default">
                <el-form-item label="类型" prop="type">
                    <el-select v-model="dataForm.type" placeholder="请选择类型" size="default" style="width:300px">
                        <el-option v-for="item in aclTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户端ID" prop="clientId" v-if="dataForm.type == 1">
                    <el-input v-model="dataForm.clientId" placeholder="请填写客户端Id" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username" v-if="dataForm.type == 2">
                    <el-input v-model="dataForm.username" placeholder="请填写用户名" :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="操作" prop="action">
                    <el-select v-model="dataForm.action" placeholder="请选择操作" size="default" style="width:300px">
                        <el-option v-for="item in actionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限" prop="permission">
                    <el-select v-model="dataForm.permission" placeholder="请选择权限" size="default" style="width:300px">
                        <el-option v-for="item in permissionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主题" prop="topic">
                    <el-input v-model="dataForm.topic" placeholder="请填写主题" :clearable="true"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button size="default" @click="dataDialogCancel">取 消</el-button>
                <el-button size="default" type="primary" @click="dataDialogConfirm">确认</el-button>
            </template>
        </el-dialog>
	</div>
</template>
<script>
import TableSpan from '@/components/table-span.vue';
import {tool} from "@/js/tool.js";
import { ElMessage } from 'element-plus'

export default {
	name: "MqttAcl",
	data: function(){
		return {
			btOption: {
				btMqttAclSave: null,
                btMqttAclUpdate: null,
                btMqttAclDelete: null
			},
            aclTypeList: [
                {value: 1,label: '客户端ID'},
                {value: 2,label: '用户名'},
                {value: 3,label: '所有用户'},
            ],
            actionList: [
                {value: 'publish',label: '发布时'},
                {value: 'subscribe',label: '订阅时'},
                {value: 'all',label: '发布和订阅时'},
            ],
            permissionList: [
                {value: 'deny',label: '拒绝'},
                {value: 'allow',label: '允许'}
            ],
			tabelData: {
	            total: 0,
	            size: 10,
	            current: 1,
	            records: []
            },
            searchCondition: {
                type: null,
                clientId: null,
                username: null,
                permission: null,
                action: null,
                topic: "",
            	page: 1,
            	size: 10
            },
            dataDialogOption: {
            	type: 0, //0新增；1修改
            	title: '',
            	isShow: false
            },
            dataForm: {
                mainId: null,
                type: null,
                clientId: "",
                username: "",
                permission: "",
                action: "",
                topic: ""
            },
            dataFormRules: {
            	type: [
                    { required: true, message: '请选择类型', trigger: 'blur' }
                ],
                clientId: [
                    { required: true, message: '请填写客户端ID', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                action: [
                    { required: true, message: '请选择操作', trigger: 'blur' }
                ],
                permission: [
                    { required: true, message: '请选择权限', trigger: 'blur' }
                ],
                topic: [
                    { required: true, message: '请填写主题', trigger: 'blur' }
                ]
            }
		}
	},
	methods: {
		searchData: function(){
			this.searchCondition.page = this.tabelData.current;
			this.searchCondition.size = this.tabelData.size;
        	getDataList(this);
        },
        handleSizeChange: function(size){
            this.searchCondition.size = size;
            this.searchCondition.page = 1;
            getDataList(this);
        },
        handleCurrentChange: function(current){
            this.searchCondition.page = current;
            getDataList(this);
        },
        btSaveData: function(){
        	this.dataDialogOption.title = "新增数据";
            this.dataDialogOption.type = 0;
            this.dataDialogOption.isShow = true;
        },
        btUpdateData: function(index, row){
        	this.dataDialogOption.title = "更新数据";
            this.dataDialogOption.type = 1;
            this.dataDialogOption.isShow = true;

            this.dataForm.mainId = row.mainId;
            this.dataForm.type = row.type;
            this.dataForm.clientId = row.clientId;
            this.dataForm.username = row.username;
            this.dataForm.permission = row.permission;
            this.dataForm.action = row.action;
            this.dataForm.topic = row.topic;
        },
        btDeleteData: function(index, row){
        	const confirmMessage = "是否删除选中数据？";
            const obj = this;
            this.$confirm(confirmMessage).then(function () {
                //执行数据删除
                const param = {
                    mainId: row.mainId
                }
                deleteData(obj, param);
            }).catch(function () {});
        },
        dataDialogBeforeClose: function(){
        	dialogCloseTips(this);
        },
        dataDialogClose: function(){
            this.dataForm.type = null;
            this.dataForm.clientId = "";
            this.dataForm.username = "";
            this.dataForm.permission = "";
            this.dataForm.action = "";
            this.dataForm.topic = "";
        	this.$refs["dataFormRef"].clearValidate();
        },
        dataDialogCancel: function(){
        	dialogCloseTips(this);
        },
        dataDialogConfirm: function(){
        	const obj = this;
        	this.$refs["dataFormRef"].validate(function(valid) {
                if(valid){
                    if(obj.dataDialogOption.type == 0){
                        //新增
                        saveData(obj);
                    }else{
                        //更新
                        updateData(obj);
                    }
                }else{
                    return false;
                }
            });
        }
	},
	created: function(){
	    const menuId = [this.$route.query.menuId]
	    const obj = this;
	    new tool.getAuthorisedRequest(menuId, this.btOption, function(){
	    	getDataList(obj);
	    });
    },
    components: {
    	TableSpan
    }
}

/**
* 获取数据信息列表
*/
function getDataList(app){
	const param = app.searchCondition;
	const url = "/iot/mqttAcl/list";
    tool.formJsonRequest(url,param,null,function(data){
        if(data.code === "0000"){
            app.tabelData.total = data.data.total;
            app.tabelData.size = data.data.size;
            app.tabelData.current = data.data.current;
            app.tabelData.records = data.data.records;
        }else{
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 保存数据信息
 */
function saveData(app){
	const param = app.dataForm;
    const url = "/iot/mqttAcl/save";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            getDataList(app);
            app.dataDialogOption.isShow = false;
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 更新数据信息
 */
function updateData(app){
    const param = app.dataForm;
    const url = "/iot/mqttAcl/update";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            getDataList(app);
            app.dataDialogOption.isShow = false;
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 删除数据信息
 */
function deleteData(app, param){
    const url = "/iot/mqttAcl/delete";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            getDataList(app);
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    });
}

/**
 * 关闭dialog的提示信息
 * @param app
 */
function dialogCloseTips(app) {
    var confirmMessage = "";
    if (app.dataDialogOption.type == 0) {
        confirmMessage = "是否放弃新增数据信息？";
    } else {
        confirmMessage = "是否放弃修改数据信息？";
    }
    var obj = app;
    app.$confirm(confirmMessage).then(function () {
        obj.dataDialogOption.isShow = false;
    }).catch(function () { });
}
</script>
<style>
.mqtt_acl_span{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
.search_item_span{
    max-width: 190px;
    height: auto;
    margin-top: 5px;
	margin-left: 10px;
}
.search_item_fix_width {
    width: 190px;
}
</style>
